<template>
  <div>
    <Drawer width="50%" title="查看详情" placement="right" v-model:visible="visible" @close="onClose">
      <template #closeIcon>
        <arrow-left-outlined />
      </template>
      <TypographyTitle :level="5">任务</TypographyTitle>
      <Row>
        <Col span="12">
          <FormItem label="服务">{{ formState.serviceName }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="端点">{{ formState.endpointName }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="监控时间">{{ formState.startTime }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="监控持续时间">{{ formState.duration }} min</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="起始监控时间">{{ formState.minDurationThreshold }} ms</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="监控间隔">{{ formState.dumpPeriod }} ms</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="最大采样数">{{ formState.maxSamplingCount }}</FormItem>
        </Col>
      </Row>
      <Divider />
      <TypographyTitle :level="5">日志</TypographyTitle>
      <Row>
        <Col span="12">
          <FormItem label="实例">{{ formState.logs[0] ? formState.logs[0].instanceName : '无' }}</FormItem>
        </Col>
      </Row>
      <Row v-for="item in formState.logs" :key="item.id">
        <Col span="12">
          <FormItem label="操作类型">{{ item.operationType }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="时间">{{ item.timeStr }}</FormItem>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Drawer, Row, Col, FormItem, Divider, TypographyTitle } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
import { LogItem } from '/@/api/maintenance-center/skywalking/profiling/model/profilingModel';
let logArr: LogItem[] = [];
const visible = ref(false);
const formState = reactive({
  serviceName: undefined,
  endpointName: undefined,
  startTime: 0,
  duration: 0,
  minDurationThreshold: 0,
  dumpPeriod: 0,
  maxSamplingCount: 0,
  logs: logArr,
});
const openDetail = async (listItem) => {
  formState.serviceName = listItem.serviceName;
  formState.endpointName = listItem.endpointName;
  formState.startTime = listItem.startStr;
  formState.duration = listItem.duration;
  formState.minDurationThreshold = listItem.minDurationThreshold;
  formState.dumpPeriod = listItem.dumpPeriod;
  formState.maxSamplingCount = listItem.maxSamplingCount;

  formState.logs = listItem.logs;
  visible.value = true;
};
const onClose = () => {
  formState.serviceName = undefined;
  formState.endpointName = undefined;
  formState.startTime = 0;
  formState.duration = 0;
  formState.minDurationThreshold = 0;
  formState.dumpPeriod = 0;
  formState.maxSamplingCount = 0;
  visible.value = false;
};

defineExpose({ openDetail });
</script>
